<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>CSS Normal Flow: Inline</title>

    <style>
      body {
        font:
          1.2em Helvetica,
          Arial,
          sans-serif;
        margin: 20px;
        padding: 0;
      }

      textarea {
        font-family: monospace;
        display: block;
        margin-bottom: 10px;
        background-color: #f4f7f8;
        border: none;
        border-left: 6px solid #558abb;
        color: #4d4e53;
        width: 90%;
        max-width: 700px;
        padding: 10px 10px 0px;
        font-size: 90%;
      }

      textarea:nth-of-type(1) {
        height: 80px;
      }

      textarea:nth-of-type(2) {
        height: 160px;
      }

      .playable-buttons {
        text-align: right;
        width: 90%;
        max-width: 700px;
        padding: 5px 10px 5px 26px;
        font-size: 100%;
      }

      section {
        width: 90%;
        max-width: 700px;
        border: 1px solid #4d4e53;
        border-radius: 2px;
        padding: 10px 14px 10px 10px;
        margin-bottom: 10px;
      }

      section input {
        display: block;
        margin: 5px;
      }
    </style>
  </head>

  <body>
    <section>
      <p>
        Before that night—<strong>a memorable night</strong>, as it was to
        prove—hundreds of millions of people had watched the rising
        smoke-wreaths of their fires without drawing any special inspiration
        from the fact.”
      </p>
    </section>

    <textarea id="code" class="playable-html">
    <p>Before that night—<strong>a memorable night</strong>, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
    </textarea>

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script>
    var section = document.querySelector("section");
    var textareaHTML = document.querySelector(".playable-html");
    var reset = document.getElementById("reset");
    var htmlCode = textareaHTML.value;

    function fillCode() {
      section.innerHTML = textareaHTML.value;
    }

    reset.addEventListener("click", function () {
      textareaHTML.value = htmlCode;
      fillCode();
    });

    textareaHTML.addEventListener("input", fillCode);
    window.addEventListener("load", fillCode);
  </script>
</html>
